<template>
  <h3>{{ eidtId ? "编辑" : "新建" }}英雄</h3>
  <div class="createClass">
    <el-form
      :inline="true"
      :model="category.categoryMsg"
      class="demo-form-inline"
      @submit="() => false"
    >
      <el-form-item label="文章分类">
        <el-select
          v-model="category.categoryMsg.types"
          class="m-2"
          placeholder="Select"
          multiple="multiple"
          size="large"
        >
          <el-option
            v-for="item in category.types"
            :key="item._id"
            :value="item._id"
            :label="item.name"
          />
        </el-select>
      </el-form-item>
      <!--        文章标题-->
      <el-form-item label="文章标题">
        <el-input
          v-model="category.categoryMsg.title"
          placeholder="请输入文章标题"
          width="100px"
        />
      </el-form-item>
      <!--      文章内容-->
      <el-form-item label="文章内容">
        <div style="border: 1px solid #ccc">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          />
          <Editor
            style="height: 500px; overflow-y: hidden"
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
            @onChange="editorChange"
          />
        </div>
        <div id="dzx"></div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" style="margin-top: 40px"
          >{{ eidtId ? "更新" : "创建" }}文章
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import {
  computed,
  onBeforeUnmount,
  onBeforeMount,
  reactive,
  shallowRef,
  ref,
} from "vue";
import { creatarticle, getEditArticle, upDateArticle } from "@/api/getArticle";
import { getCreatCategory } from "@/api/getCategory";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { IDomEditor } from "@wangeditor/editor";
import "@wangeditor/editor/dist/css/style.css"; // 引入富文本编辑 css
import {useGetToken} from "@/hook/useGetToken";

const category = reactive({
  //上传的数据
  categoryMsg: {
    title: "",
    types: <any>[],
    body: "",
  },
  types: <any>[],
});

const router = useRouter();
const route = useRoute();

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref("");
const mode = "default";

const toolbarConfig = {};
const editorConfig = {
  placeholder: "请输入内容...",
  MENU_CONF: {
    uploadImage: {
      server: "/api/article",
      headers:useGetToken()
    },
  },
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = (editor: IDomEditor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const editorChange = (editor: IDomEditor) => {
  category.categoryMsg.body = valueHtml.value;
};
/**
 *
 */

const eidtId = computed(() => {
  return route.params.id;
});
//提交分类信息
const onSubmit = async () => {
  let result;
  if (route.params.id) {
    //更新英雄数据
    result = await upDateArticle(eidtId.value, category.categoryMsg);
  } else {
    //添加英雄
    result = await creatarticle(category.categoryMsg);
  }

  if (result.status === 200) {
    router.push({
      path: "/home/articleList",
    });
    //消息提示框
    ElMessage({
      message: "保存成功",
      type: "success",
    });
  } else {
    ElMessage({
      message: "保存失败",
      type: "warning",
    });
  }
};

//获取被编辑数据的详情
const getEdit = async () => {
  let result = await getEditArticle(eidtId.value);
  console.log(result.data);
  if (result.status === 200) {
    category.categoryMsg = Object.assign({}, category.categoryMsg, result.data);
    valueHtml.value = category.categoryMsg.body;
  }
};

//获取分类信息
const getTypes = async () => {
  let result = await getCreatCategory();
  category.types = result.data;
};

onBeforeMount(async () => {
  if (route.params.id) await getEdit();
  await getTypes();
});
</script>

<style lang="less" scoped>
.createClass {
  margin: 40px 40px 0 40px;
  //display: flex;
}

.demo-form-inline {
  display: flex;
  flex-direction: column;
}

.avatar-uploader .el-upload {
  border: 1px solid black;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: black;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  border: 1px solid black;
  border-radius: 10px;
}

//富文本
.rich-text {
  width: 100%;
}
</style>
